<template>
  <div class="container">
    <div class="commontop">
      <div class="commontop-left">
        <el-input placeholder="项目、id" v-model="filterText" clearable>
        </el-input>
        <el-button
          @click="Addcatalogue(-1)"
          icon="iconfont icon-piliangdaoruyonghu5"
          >添加一级目录</el-button
        >
        <!-- <el-button icon="iconfont icon-piliangdaoruyonghu5">批量导入</el-button> -->
      </div>
      <div class="commontop-right">
        <el-button>建设单位</el-button>
        <el-button>监理单位</el-button>
        <el-button>施工单位</el-button>
        <el-button icon="iconfont icon-shanchu1" class="red">删除</el-button>
      </div>
    </div>
    <div class="main">
      <div class="treePlate scroll_wrap">
        <el-tree
          class="filter-tree"
          :data="data"
          show-checkbox
          :props="defaultProps"
          node-key="id"
          draggable
          @node-click="handleNodeClick"
          :filter-node-method="filterNode"
          :highlight-current="false"
          ref="tree"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span class="nodeLabel"> {{ node.label }} </span>
            <span class="nodeLeft">
              <div class="left">
                <el-checkbox
                  v-model="data.set_build"
                  :true-label="1"
                  :false-label="0"
                  @change="changeSet(data, 1)"
                ></el-checkbox>
                <el-checkbox
                  v-model="data.set_supervisor"
                  :true-label="1"
                  :false-label="0"
                  @change="changeSet(data, 2)"
                ></el-checkbox>
                <el-checkbox
                  v-model="data.set_construction"
                  :true-label="1"
                  :false-label="0"
                  @change="changeSet(data, 3)"
                ></el-checkbox>
              </div>
              <div>
                <el-button class="nodeBtn" size="medium" type="text">
                  <i
                    class="iconfont icon-xinjian"
                    @click="() => Addcatalogue(data)"
                  ></i>
                </el-button>
                <el-button
                  class="nodeBtn"
                  size="medium"
                  type="text"
                  @click.stop="() => remove(node, data)"
                >
                  <i class="iconfont icon-a-shanchu1"></i>
                </el-button>
                <el-button
                  class="nodeBtn"
                  size="medium"
                  type="text"
                  @click.stop="() => showEdit(node, data)"
                >
                  <i class="iconfont icon-a-bianji13"></i>
                </el-button>
              </div>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="login">
      <el-button type="primary" @click="ParticipatingUnits(1)"
        >匹配建设单位</el-button
      >

      <el-button type="info" @click="ParticipatingUnits(2)"
        >匹配监理单位</el-button
      >
      <el-button type="success" @click="ParticipatingUnits(3)"
        >匹配施工单位</el-button
      >
    </div>
    <el-dialog :visible.sync="drawerVisible" width="45%" class="tab">
      <el-form
        :model="roleForm"
        :rules="rules"
        ref="roleForm"
        label-position="left"
      >
        <el-form-item prop="title" label="分类名">
          <el-input
            v-model="roleForm.title"
            placeholder="请输入分类名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="archives_no" class="IPBT" label="档案号">
          <el-input
            v-model="roleForm.archives_no"
            placeholder="请输入档案号"
            clearable
            @blur="changeDang"
            @input="changeDang"
            @clear="setValueNull"
          >
            ></el-input
          >

          <button class="Btn" type="button" @click="ChangeIp">{{ Btn }}</button>
          <button class="Btn" type="button" @click="ChangeIps">
            {{ BTn }}
          </button>
        </el-form-item>
        <el-form-item prop="add_direct" label="是否可直接传入:">
          <el-switch
            v-model="roleForm.add_direct"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#C0CCDA"
          >
          </el-switch>
        </el-form-item>
        <div class="list">
          <el-form-item label="种类：（必选）">
            <el-radio-group v-model="radio1" @change="ChangeIp1">
              <el-radio-button
                :label="item.title"
                v-for="item in list1"
                :key="item.id"
              ></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="分类：（必选）">
            <el-radio-group v-model="radio2" @change="ChangeIp2">
              <el-radio-button
                :label="item.title"
                v-for="item in list2"
                :key="item.id"
              ></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="属类：阶段代码（可选）">
            <el-radio-group v-model="radio3" @change="ChangeIp3">
              <el-radio-button
                :label="item.title"
                v-for="item in list3"
                :key="item.id"
              ></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="属类：专业代码（可选）">
            <el-radio-group v-model="radio4" @change="ChangeIp4">
              <el-radio-button
                :label="item.title"
                v-for="item in list4"
                :key="item.id"
              ></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="login-btn">
          <el-button @click="drawerVisible = false">取 消</el-button>
          <el-button type="primary" @click="category('roleForm')"
            >添加分类</el-button
          >
        </div>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleAmend" width="45%" class="tab">
      <el-form :model="editForm" ref="editForm" label-position="left">
        <el-form-item prop="title" label="分类名">
          <el-input
            v-model="editForm.title"
            placeholder="请输入分类名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="archives_no" class="IPBT" label="档案号">
          <el-input
            v-model="editForm.archives_no"
            placeholder="请输入档案号"
            clearable
            @clear="setValueNull"
          >
            ></el-input
          >

          <button class="Btn" type="button" @click="ChangeIp">{{ Btn }}</button>
          <button class="Btn" type="button" @click="ChangeIps">
            {{ BTn }}
          </button>
        </el-form-item>
        <el-form-item prop="add_direct" label="是否可直接传入:">
          <el-switch
            v-model="editForm.add_direct"
            active-color="#13ce66"
            active-value="1"
            inactive-value="0"
            inactive-color="#C0CCDA"
          >
          </el-switch>
        </el-form-item>
        <div class="list">
          <el-form-item label="种类：（必选）">
            <el-radio-group v-model="val1" @change="ChangeIp1">
              <el-radio-button
                :label="item.title"
                v-for="item in list1"
                :key="item.id"
              ></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="分类：（必选）">
            <el-radio-group v-model="val2" @change="ChangeIp2">
              <el-radio-button
                :label="item.title"
                v-for="item in list2"
                :key="item.id"
              ></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="属类：阶段代码（可选）">
            <el-radio-group v-model="val3" @change="ChangeIp3">
              <el-radio-button
                :label="item.title"
                v-for="item in list3"
                :key="item.id"
              ></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="属类：专业代码（可选）">
            <el-radio-group v-model="val4" @change="ChangeIp4">
              <el-radio-button
                :label="item.title"
                v-for="item in list4"
                :key="item.id"
              ></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="login-btn">
          <el-button @click="dialogVisibleAmend = false">取 消</el-button>
          <el-button type="primary" @click="editModify('editForm')"
            >编辑分类</el-button
          >
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  treeClassifies,
  Addclassifies,
  companyType,
  delClassifies,
  modifyClassifies,
  partCompanyStatus,
  seeClassifies,
} from "../../../api/Template/index";
export default {
  data() {
    return {
      /* 搜索树状图 */
      filterText: "",
      /* 树状图数据 */
      data: [],
      /* 添加一级目录 */
      roleForm: {
        title: "",
        parent_id: 0,
        template_id: 0,
        add_direct: "",
        archives_no: "",
        project_no: "",
        type: "",
        stage_code: "",
        major_code: "",
      },
      /* 选择框提供的数据 */
      companyForm: {
        id: "",
        part_company_type: "",
        status: "",
        template_id: "",
      },
      /* 匹配单位提供的数据 */
      rForm: {
        type: "",
        classify_ids: "",
        template_id: "",
      },
      /* 新增档案号组合+种类 */
      radio1: "",
      /* 新增档案号组合+分类 */
      radio2: "",
      /* 新增档案号组合+阶段代码 */
      radio3: "",
      /* 新增档案号组合+专业代码 */
      radio4: "",
      /* 新增档案号组合+圆点 */
      Btn: "•",
      /* 新增档案号组合+斜杠 */
      BTn: "/",
      idList: "",
      /* 新增档案号组合+种类选择器 */
      list1: [
        { id: "1", title: "J" },
        { id: "2", title: "K" },
      ],
      /* 新增档案号组合+分类选择器 */
      list2: [{ id: "1", title: "[项目代码]" }],
      /* 新增档案号组合+阶段代码选择器 */
      list3: [
        { id: "1", title: "1" },
        { id: "2", title: "2" },
        { id: "3", title: "3" },
        { id: "4", title: "4" },
        { id: "5", title: "5" },
        { id: "6", title: "6" },
      ],
      /* 新增档案号组合+专业代码选择器 */
      list4: [
        { id: "1", title: "ZH" },
        { id: "2", title: "XL" },
        { id: "3", title: "LJ" },
        { id: "4", title: "Q" },
        { id: "5", title: "HQ" },
        { id: "6", title: "S" },
        { id: "7", title: "Z" },
        { id: "8", title: "J" },
        { id: "9", title: "L" },
        { id: "10", title: "DC" },
        { id: "11", title: "SH" },
        { id: "12", title: "TX" },
        { id: "13", title: "XH" },
        { id: "14", title: "D" },
        { id: "15", title: "DH" },
        { id: "16", title: "XX" },
        { id: "17", title: "F" },
        { id: "18", title: "HB" },
        { id: "19", title: "DM" },
        { id: "20", title: "ZY" },
        { id: "21", title: "RF" },
        { id: "22", title: "LL" },
        { id: "23", title: "JL" },
      ],
      /* 新增种类数组 */
      arr1: ["J", "K"],
      /* 新增分类数组 */
      arr2: ["[项目代码]"],
      /* 新增阶段代码数组 */
      arr3: ["1", "2", "3", "4", "5", "6"],
      /* 新增专业代码数组 */
      arr4: [
        "Z",
        "F",
        "Q",
        "D",
        "S",
        "J",
        "L",
        "ZH",
        "XL",
        "LJ",
        "SH",
        "TX",
        "XH",
        "HQ",
        "DH",
        "XX",
        "HB",
        "DM",
        "DC",
        "ZY",
        "RF",
        "LL",
        "JL",
      ],
      /* 添加分类蒙尘 */
      drawerVisible: false,
      //树状图编辑
      editForm: {
        title: "",
        parent_id: 0,
        template_id: 0,
        project_no: 0,
        archives_no: "",
        type: "",
        stage_code: "",
        add_direct: "",
        major_code: "",
      },
      /* 编辑档案号组合 +种类 */
      val1: "",
      /* 编辑档案号组合 +分类 */
      val2: "",
      /* 编辑档案号组合 +阶段代码 */
      val3: "",
      /* 编辑档案号组合 +专业代码 */
      val4: "",
      /* 编辑分类蒙尘 */
      dialogVisibleAmend: false,
      rules: {
        title: [
          {
            required: true,
            message: "请输入分类名称",
            trigger: "blur",
          },
        ],
        archives_no: [
          {
            required: true,
            message: "请输入档案号",
            trigger: "blur",
          },
        ],
      },
      defaultProps: {
        children: "children",
        label: "title",
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    /* 获取树状图数据 */
    async loadData() {
      let template_id = this.$route.query.id;
      let res = await treeClassifies({ template_id });
      this.data = res.data.data;
      console.log(res);
    },
    /* 多选框选择参建单位 */
    async changeSet(data, num) {
      this.companyForm.template_id = this.$route.query.id;
      console.log(data);
      console.log(data.set_build);
      this.companyForm.id = data.id;
      this.companyForm.part_company_type = num;
      if (num == 1) {
        console.log(num, "121");
        if (data.set_build == 0) {
          this.companyForm.status = 2;
          let res = await partCompanyStatus(this.companyForm);
          console.log(res);
        } else if (data.set_build == 1) {
          this.companyForm.status = 1;
          let res = await partCompanyStatus(this.companyForm);
          console.log(res);
        }
      } else if (num == 2) {
        console.log(num, "121");
        if (data.set_supervisor == 0) {
          this.companyForm.status = 2;
          let res = await partCompanyStatus(this.companyForm);
          console.log(res);
        } else if (data.set_supervisor == 1) {
          this.companyForm.status = 1;
          let res = await partCompanyStatus(this.companyForm);
          console.log(res);
        }
      } else if (num == 3) {
        console.log(num, "121");
        if (data.set_construction == 0) {
          this.companyForm.status = 2;
          let res = await partCompanyStatus(this.companyForm);
          console.log(res);
        } else if (data.set_construction == 1) {
          this.companyForm.status = 1;
          let res = await partCompanyStatus(this.companyForm);
          console.log(res);
        }
      }
    },
    /* 树状图编辑 */
    async showEdit(node, data) {
      this.editForm = {};
      this.dialogVisibleAmend = true;
      console.log(data.id);
      let id = data.id;
      let res = await seeClassifies({ id });
      console.log(res);
      this.editForm = res.data.data;
      console.log(this.editForm.major_code);
      this.val1 = this.editForm.type;
      this.val2 = this.editForm.project_no;
      this.val3 = this.editForm.stage_code;
      this.val4 = this.editForm.major_code;
    },
    //遍历数组查看档案号内是否有该数组的数据
    changeDang() {
      console.log(this.roleForm.archives_no);
      let str = this.roleForm.archives_no;
      //this.setValueNull();
      this.radio1 = "";
      this.radio2 = "";
      this.radio4 = "";
      this.val1 = "";
      this.val2 = "";
      this.val4 = "";
      let str1 = str.substring(0, 2);
      let str2 = str.substring(1);
      for (let item of this.arr1) {
        console.log(item);
        if (str1.indexOf(item) != -1) {
          this.radio1 = item;
          break;
        }
      }
      for (let item of this.arr2) {
        if (str.indexOf(item) != -1) {
          this.radio2 = item;
          break;
        }
      }
      /*  for (let item of this.arr3) {
        if (str.indexOf(item) != -1) {
          this.radio3 = item;
          break;
        }
      } */

      for (let item of this.arr4) {
        if (str2.indexOf(item) != -1) {
          this.radio4 = item;
          break;
        }
      }
    },
    //清空选中的四个单选
    setValueNull(val) {
      this.radio1 = "";
      this.radio2 = "";
      this.radio3 = "";
      this.radio4 = "";
      this.val1 = "";
      this.val2 = "";
      this.val3 = "";
      this.val4 = "";
    },
    //获取当选选中的树形节点的data
    handleNodeClick(data) {
      console.log("data:", data);
    },
    //搜索
    filterNode(value, data) {
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    //添加一级目录显示蒙尘
    async Addcatalogue(data) {
      console.log(data.id);
      this.roleForm.template_id = this.$route.query.id;
      console.log(this.roleForm.template_id);
      this.setValueNull();
      if (data.archives_no != undefined) {
        this.roleForm.archives_no = data.archives_no;
      }

      if (data == -1) {
        this.drawerVisible = true;
        this.roleForm.parent_id = 0;
        (this.roleForm.archives_no = ""),
          (this.roleForm.template_id = this.$route.query.id);
        console.log(this.roleForm);
      } else {
        let id = data.id;
        console.log();
        let res = await seeClassifies({ id });
        console.log(res);
        this.drawerVisible = true;
        this.roleForm.parent_id = data.id;
        this.radio1 = res.data.data.type;
        this.radio2 = res.data.data.project_no;
        this.radio3 = res.data.data.stage_code;
        this.radio4 = res.data.data.major_code;
        console.log(res);
        console.log(this.roleForm);
      }
    },
    //添加一级目录提交
    category(formName) {
      console.log(this.roleForm);
      this.roleForm.type = this.radio1;
      this.roleForm.project_no = this.radio2;
      this.roleForm.stage_code = this.radio3;
      this.roleForm.major_code = this.radio4;
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await Addclassifies(this.roleForm);
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.$refs[formName].resetFields();
            this.drawerVisible = false;
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
      });
    },
    /* 新增档案号组合+圆点改变 */
    ChangeIp() {
      this.roleForm.archives_no += this.Btn;
      this.editForm.archives_no += this.Btn;
      console.log(this.roleForm.archives_no);
    },
    /* 新增档案号组合+斜杠改变 */
    ChangeIps() {
      this.roleForm.archives_no += this.BTn;
      this.editForm.archives_no += this.BTn;
      console.log(this.roleForm.archives_no);
    },
    /* 新增档案号组合+种类改变 */
    ChangeIp1() {
      this.roleForm.archives_no += this.radio1;
      this.roleForm.type = this.radio1;
      this.editForm.archives_no += this.val1;
      this.editForm.type = this.val1;
      console.log(this.roleForm.archives_no);
      console.log(this.radio1);
    },
    /* 新增档案号组合+分类改变 */
    ChangeIp2() {
      this.roleForm.archives_no += this.radio2;
      this.roleForm.project_no = this.radio2;
      this.editForm.archives_no += this.val2;
      this.editForm.project_no = this.val2;
      console.log(this.roleForm.archives_no);
    },
    /* 新增档案号组合+阶段代码改变 */
    ChangeIp3() {
      this.roleForm.archives_no += this.radio3;
      this.roleForm.stage_code = this.radio3;
      this.editForm.archives_no += this.val3;
      this.editForm.stage_code = this.val3;
      console.log(this.roleForm.archives_no);
    },
    /* 新增档案号组合+专业代码改变 */
    ChangeIp4() {
      this.roleForm.archives_no += this.radio4;
      this.roleForm.major_code = this.radio4;
      this.editForm.archives_no += this.val4;
      this.editForm.major_code = this.val4;
      console.log(this.roleForm.archives_no);
    },
    /* 匹配参建单位 */
    async ParticipatingUnits(num) {
      this.rForm.template_id = this.$route.query.id;
      this.idList = this.$refs.tree.getCheckedNodes(false, true);
      console.log(this.idList, "111");
      let ids = this.idList.map((i) => i.id);
      this.rForm.classify_ids = ids.join(",");
      if (num == 1) {
        this.rForm.type = num;
      } else if (num == 2) {
        this.rForm.type = num;
      } else if (num == 3) {
        this.rForm.type = num;
      }
      console.log(this.rForm);
      let res = await companyType(this.rForm);
      console.log(res);
      if (res.data.code === 200) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: res.data.msg,
          type: "success",
        });
        this.loadData();
      } else {
        this.$message({
          showClose: true,
          duration: 3000,
          message: res.data.msg,
          type: "error",
        });
      }
    },
    //树状图删除
    remove(node, data) {
      const current = node.childNodes;
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      console.log("1", node);
      console.log("2", data);
      if (current.length == "0") {
        this.$confirm("确认删除？")
          .then(async (_) => {
            console.log(data.id);
            let id = data.id;
            console.log(id);
            let res = await delClassifies({ id });
            console.log(res);
            this.loadData();
          })
          .catch((_) => {});
      } else {
        this.$message({
          showClose: true,
          duration: 3000,
          message: "此部门还有子部门，不支持删除",
          type: "warning",
        });
      }
    },
    /* 编辑确定 */
    editModify(formName) {
      this.$refs[formName].validate(async (valid) => {
        //console.log(valid);
        if (valid) {
          let res = await modifyClassifies(this.editForm);
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
        this.dialogVisibleAmend = false;
      });
    },
  },
  created() {
    this.loadData();
  },
};
</script>

<style scoped lang="less">
@import "../../../assets/css/tree.less";
.container {
  height: 85%;
  .main {
    height: 85%;
  }
  /deep/.treePlate .el-input {
    width: 240px !important;
    height: 100%;
  }
  .indexOfbgc2 {
    background-color: #3963fd;
    color: #fff;
  }
}
.login-btn {
  display: flex;
  justify-content: space-around;
}

.input-top {
  display: flex;
}
.treePlate {
  width: 100%;
  height: 100%;
}
.login {
  display: flex;
  position: fixed;
  margin: 0 auto;
  z-index: 100;
  bottom: 10px;
}
.IPBT {
  .el-input {
    width: 72%;
  }
}
.Btn {
  padding: 10px 15px;
  border-radius: 5%;
  border: 1px solid #ccc;
  cursor: pointer;
}
.nodeLeft {
  width: 240px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  .left {
    margin-top: 8px;
  }
}
.el-checkbox {
  margin-right: 46px;
}

/deep/.el-radio-button__inner {
  padding: 7px 7px;
}
</style>